<template>
  <div class="monitorChart">
    <div class="chart-tit">
      {{tit}}
    </div>
    <div class="echart-wrap" :id="id">

    </div>

  </div>
</template>

<script>
import { 
  format
} from 'silly-datetime'
import areaChart from '@/charts/area'
import { mapState } from 'vuex'
let myChart = null
export default {
  props: {
    id: {
      type: String,
      require: true
    },
    tit: {
      type: String,
      require: true
    },
    chartData: {
      type: Array,
      require: true
    }
  },
  computed: {
    ...mapState(['detailTime']),
  },
  watch: {
    chartData(val) {
      console.log('图表监听变化： ', val)
      this.draw()
    }
  },
  methods: {
    draw() {
      let [start, end] = this.detailTime
      let startDay = format(start, 'YYYY-MM-DD')
      let endDay = format(end, 'YYYY-MM-DD')
      myChart = this.$echarts.init(document.getElementById(this.id))
      myChart.clear()
      const opt = areaChart(this.chartData, start, end, startDay === endDay, this.id, this.tit)
      myChart.setOption(opt)
      myChart.resize()
      myChart.dispatchAction({
        type: 'dataZoom',
        start: 0,
        end: 100
      })
    },
  },
  mounted() {
    this.draw()
  }
}
</script>

<style lang="stylus">
.monitorChart {
  height: getPx(180);
  margin-bottom: getPx(20);
  .echart-wrap {
    height: getPx(160);
  } 
}
</style>